/* 注释 */
// 单行注释 不会被编译到css文件里面
/* 变量 格式 @变量名:值; */
@color:#e92322;
@bgColor:pink;
body {
    background-color: @color;
}
p {
    color: @color;
}
a {
    background-color: @bgColor;
}
/* 混入,理解成js里面的函数 */

/* .addRadius{
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
} */
.addRadius(@r:30px){
    border-radius: @r;
    -webkit-border-radius:@r;
    -moz-border-radius:@r;
}

span {
    font-size: 12px;
    font-weight: 700;
    .addRadius(10px);
}

div {
    height: 200px;
    width: 200px;
    .addRadius(40px);
}
/* 嵌套 */
div{
    font-size: 20px;
    > p {
        line-height: 20px;
        > a {
            color: yellow;
            &:hover {
                color: @color;
            }
        }
        > img {
            width: 100%;
        }
    }
    > h2 {
        font-weight: normal;
        >p {
            font-size: 34px;
        }
    }
    >div {
        height: 200px;
    }
}





/* 
   <div>
        <p>
            <a href="#"></a>
            <img src="" alt="">
            <span></span>
        </p>
        <h2>
            <p></p>
        </h2>
        <div></div>
    </div>
*/

/* div {}
div > p {}
div > p >a{}
div > p > a:hover{}
div > p > img{}
div > p > span{} */